<template>
  <div class="question">
    <div class="top-box">
      <van-dropdown-menu active-color="#222222">
        <van-dropdown-item v-model="currentCity" ref="city">
          <template #title> <span>面试宝典</span> {{ currentCity }} </template>
          <van-index-bar :index-list="indexList">
            <template v-for="(value, key) in cityList">
              <van-index-anchor :index="key" :key="key">
                {{ key }}
              </van-index-anchor>
              <van-cell
                :title="subitem"
                v-for="(subitem, subindex) in value"
                :key="subindex"
                @click="checkcity(subitem)"
              />
            </template>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="scroll-wrap">
        <div class="content">
          <van-tag
            type="primary"
            round
            :class="{ active: currentId === index }"
            v-for="(item, index) in getSubject"
            :key="index"
            @click="currentId = index"
            >{{ item.name }}</van-tag
          >
        </div>
      </div>
    </div>
    <div class="nav-box">
      <div class="item error">
        <i class="iconfont iconicon_mine_cuoti" @click="goErrorQue"></i>常错题库
      </div>
      <div class="item collect">
        <i class="iconfont iconicon_mine_tikushoucang" @click="goCollect"></i
        >收藏题库
      </div>
      <div class="item company" @click="$router.push('/company')">
        <i class="iconfont iconicon_mine_qiyeshoucang"></i>企业题库
      </div>
      <div class="item answer">
        <i class="iconfont iconicon_mine_mianjing" @click="goHadAns"></i
        >已答题库
      </div>
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :speed="100"
        :stroke-width="60"
        layer-color="transparent"
        :color="gradientColor"
      >
        <template #default>
          <div class="circle-bg">
            <h2>顺序刷题</h2>
            <span>{{ questionNum.useBegin }}/{{ questionNum.totalBegin }}</span>
          </div>
        </template>
      </van-circle>
    </div>
    <div class="num-box">
      <h2>累计收录</h2>
      <span>{{ questionNum.totalBegin }}</span>
      <img src="@/assets/timg.gif" alt="" />
    </div>
    <van-button
      type="info"
      size="large"
      class="questionbtn"
      @click="goInterview"
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { interFilters, interviewQuestions } from '../../api/api'
import { mapMutations, mapState } from 'vuex'
import { getLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      currentCity: '全国',
      currentId: 0,
      cityList: {},
      indexList: [],
      cityPositions: {},
      currentRate: 0,
      gradientColor: {
        '0%': '#03a9f4',
        '33%': '#f441a5',
        '66%': '#faeb3b',
        '100%': '#03a9f4'
      },
      questionNum: {
        useBegin: 0,
        useCount: 56,
        totalBegin: 0,
        totalCount: 0
      },
      rate: 0
    }
  },
  methods: {
    ...mapMutations(['SETQUESTION']),
    // 选中城市事件
    checkcity (val) {
      this.currentCity = val
      this.currentId = 0
      this.$refs.city.toggle()
    },
    // 点击按钮跳转到答题页面
    async goInterview () {
      const res = await interviewQuestions({
        type: this.getSubject[this.currentId].id,
        city: this.currentCity
      })
      this.SETQUESTION(res.data)
      this.$router.push('/interview')
    },
    // 跳转到常错题库
    goErrorQue () {
      this.SETQUESTION(this.erroerQue)
      this.$router.push('/interview')
    },
    // 跳转到收藏题库
    goCollect () {
      this.SETQUESTION(this.collectQue)
      this.$router.push('/interview')
    },
    // 跳转到已答题库
    goHadAns () {
      this.SETQUESTION(this.ansQue)
      this.$router.push('/interview')
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    }),
    getSubject () {
      return this.cityPositions[this.currentCity]
    },
    // 根据用户信息得到错题库，已答题库，收藏题库
    // 收藏题库
    collectQue () {
      if (this.userInfo.collectQuestions !== undefined) {
        var newArr = []
        this.userInfo.collectQuestions.forEach(item => {
          newArr.push({ id: item })
        })
        return newArr
      } else {
        return []
      }
    },
    // 错题库
    erroerQue () {
      if (this.userInfo.errorQuestions !== undefined) {
        var newArr1 = []
        this.userInfo.errorQuestions.forEach(item => {
          newArr1.push({ id: item })
        })
        return newArr1
      } else {
        return []
      }
    },
    // 已答题库
    ansQue () {
      if (
        this.userInfo.errorQuestions !== undefined &&
        this.userInfo.correctQuestions !== undefined
      ) {
        var newArr2 = [
          ...new Set([
            ...this.userInfo.errorQuestions,
            ...this.userInfo.correctQuestions
          ])
        ]
        var newArr3 = []
        newArr2.forEach(item => {
          newArr3.push({ id: item })
        })
        return newArr3
      } else {
        return []
      }
    }
  },
  async created () {
    // 判断用户是否登录
    if (!getLocal('heimamm_mobile_token')) {
      this.$router.push('/checklogin')
    }
    // 刷新页面，得到筛选条件
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
    const res = await interFilters()
    this.cityPositions = res.data.cityPositions
    this.cityList = res.data.citys
    this.questionNum.totalCount = res.data.totalCount
    for (var key in this.cityList) {
      this.indexList.push(key)
    }
    // 得到数据后 页面的数据开始动
    var time1 = setInterval(() => {
      // 计算本次移动的距离
      var useStep = (this.questionNum.useCount - this.questionNum.useBegin) / 10
      var totalStep =
        (this.questionNum.totalCount - this.questionNum.totalBegin) / 7
      useStep = Math.ceil(useStep)
      totalStep = Math.ceil(totalStep)
      this.questionNum.useBegin += useStep
      this.questionNum.totalBegin += totalStep
      if (useStep === 0 && totalStep === 0) {
        clearInterval(time1)
        this.rate = Math.round(
          (this.questionNum.useBegin / this.questionNum.totalCount) * 100
        )
      }
    }, 60)
  }
}
</script>

<style lang="less" scoped>
.question {
  .top-box {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(12, 16, 20, 0.08);
    /deep/.van-dropdown-menu__bar {
      box-shadow: none;
    }
    /deep/ .van-ellipsis {
      font-size: 12px;
      span {
        font-size: 18px;
      }
    }
    /deep/.van-dropdown-menu__title::after {
      border-color: transparent transparent #da5765 #da5765;
    }
    /deep/.van-index-anchor {
      transform: translateY(-1px);
      font-size: 12px;
      color: #939393;
      background-color: #f7f4f5;
    }
    .scroll-wrap {
      width: 100%;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        padding: 15px;
        display: flex;
        height: 59px;
        .van-tag {
          padding: 6px 12px;
          flex-shrink: 0;
          margin-right: 10px;
          background: #f7f4f5;
          color: #545671;
        }
        .van-tag.active {
          background: #00b8d4;
          color: #fff;
        }
      }
    }
  }
  .nav-box {
    height: 200px;
    margin-top: 15px;
    position: relative;
    .item {
      position: absolute;
      font-size: 12px;
      color: #545671;
      .iconfont {
        color: #fff;
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-align: center;
        line-height: 44px;
        font-size: 24px;
        margin-bottom: 7px;
      }
    }
    .item.error {
      top: 20px;
      left: 42px;
      .iconfont {
        background: linear-gradient(#ff8080, #ff4949);
      }
    }
    .item.collect {
      top: 20px;
      right: 42px;
      .iconfont {
        background: linear-gradient(#ffda05, #ffb302);
      }
    }
    .item.company {
      bottom: 20px;
      left: 42px;
      .iconfont {
        background: linear-gradient(#00ddec, #00b8d4);
      }
    }
    .item.answer {
      bottom: 20px;
      right: 42px;
      .iconfont {
        background: linear-gradient(#3ee5b1, #1dc779);
      }
    }
    /deep/ .van-circle {
      width: 120px !important;
      height: 120px !important;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 50%;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: url(~@/assets/circleBg.png);
        background-size: 100%;
      }
      .circle-bg {
        width: 100px;
        box-sizing: border-box;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(60deg, #e55d87, #5fc3e4);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 20px 0;
        color: #fff;
        h2 {
          margin: 0;
          font-size: 16px;
        }
        span {
          font-size: 16px;
        }
      }
    }
  }
  .num-box {
    position: relative;
    height: 130px;
    background: #fff;
    font-size: 18px;
    text-align: center;
    padding-top: 21px;
    margin-top: 20px;
    text-align: center;
    img {
      position: absolute;
      top: 5px;
      right: 24px;
      width: 120px;
      height: 120px;
    }
    h2 {
      margin: 0;
      margin-bottom: 21px;
      background-image: -webkit-linear-gradient(
        left,
        blue,
        #66ffff 10%,
        #cc00ff 20%,
        #cc00cc 30%,
        #ccccff 40%,
        #00ffff 50%,
        #ccccff 60%,
        #cc00cc 70%,
        #cc00ff 80%,
        #66ffff 90%,
        blue 100%
      );
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 4s linear infinite;
    }
    span {
      font-size: 30px;
    }
  }
  .questionbtn {
    display: block;
    width: 270px;
    height: 30px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    margin: 25px auto;
    border-radius: 15px;
    color: #fff;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 0 5px #76c6f1, 0 0 0 10px #029acc, 0 0 0 15px #326799;
    animation: sun 8s infinite;
  }
}
@keyframes sun {
  100% {
    background-position: -400% 0;
  }
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
